<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('用电统计')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>设备类型：</label>
                            <input type="text" name="bianhao"/>
                        </li>
                        <li>
                            <label>设备：</label>
                            <input type="text" name="checkdate"/>
                        </li>
                        <li>
                            <label>时间：</label>
                            <input type="text" name="checkdate"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-3 " style="margin-top: 20px">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">今日</span>
                    <h5>用电量</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">40 88</h1>
                    <div class="stat-percent font-bold text-success">12% <i class="fa fa-bolt"></i>
                    </div>
                    <small>今日用电</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3" style="margin-top: 20px">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">本周</span>
                    <h5>用电量</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">106,120</h1>
                    <div class="stat-percent font-bold text-navy">20% <i class="fa fa-level-up"></i>
                    </div>
                    <small>环比</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3" style="margin-top: 20px">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">本月</span>
                    <h5>用电量</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">106,120</h1>
                    <div class="stat-percent font-bold text-navy">20% <i class="fa fa-level-up"></i>
                    </div>
                    <small>环比</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3" style="margin-top: 20px">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">本年</span>
                    <h5>用电量</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">106,120</h1>
                    <div class="stat-percent font-bold text-navy">20% <i class="fa fa-level-up"></i>
                    </div>
                    <small>环比</small>
                </div>
            </div>
        </div>

        <div class="col-sm-12 search-collapse">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="main" style="width: 100%;height:400px;"></div>
        </div>
        <div class="col-sm-12 search-collapse">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="top" style="width: 100%;height:400px;"></div>
        </div>


    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>
<script th:inline="javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '时段用电'
        },
        tooltip: {},
        legend: {
            data: ['用电量']
        },
        xAxis: {
            data: ['00:00', '01:00', '02:00', '03:00', '04:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00']
        },
        yAxis: {},
        series: [
            {
                name: '用电量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 205, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。static/js/plugins/echarts/echarts.min.js
    myChart.setOption(option);
</script>
<script th:inline="javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('top'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '用电排名top10'
        },
        tooltip: {},
        legend: {
            data: ['用电量']
        },
        xAxis: {
            data: ['A1AH1', 'A1AH1', 'A1AH1', 'A1AH1', 'A1AH1', 'A1AH1', 'A1AH1', 'A1AH1', 'A1AH1', 'A1AH1']
        },
        yAxis: {},
        series: [
            {
                name: '用电量',
                type: 'bar',
                data: [286,238,201,188,168,138,128,100,80,69]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。static/js/plugins/echarts/echarts.min.js
    myChart.setOption(option);
</script>
</body>
</html>
